<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-06-02 10:10:18
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-27 13:50:38
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogFormVisible"
      width="716px"
      :close-on-click-modal="false"
      :before-close="handleDimissionClose"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <div slot="title" class="dialogTitle">
        <p>
          请选择导出内容
          <span v-show="!defaultArr.length">（至少选择一项导出内容）</span>
        </p>
      </div>
      <div>
        <el-tree
          :data="colmnList"
          :props="defaultProps"
          show-checkbox
          node-key="prop"
          :check-strictly="checkStrictly"
          :default-checked-keys="checkedKeys"
          default-expand-all
          :expand-on-click-node="false"
          ref="columnTree"
          @check-change="handleCheckChange"
        >
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleDimissionClose" class="cancel"
          >关闭</el-button
        >
        <el-button
          type="primary"
          @click.native="confirmExcel"
          :disabled="!defaultArr.length"
          class="save"
          >{{ btnValue }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'caseRegistrationExportExcel',
  data() {
    return {
      checkStrictly: true,
      defaultArr: [],
      selectMenuId: [],
      checkedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      btnValue: '导出',
      childData: [],
      // colmnList: [
      //     {
      //         label: "身份信息",
      //         prop: "one",
      //         children: [
      //             {
      //                 prop: "name",
      //                 label: "人员姓名",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "idcard",
      //                 label: "身份证号",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "sex",
      //                 label: "人员性别",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "birthday",
      //                 label: "出生日期",
      //                 isShow: false
      //             },
      //             {
      //                 prop: "countyName",
      //                 label: "户籍",
      //                 isShow: false
      //             },
      //             {
      //                 prop: "nationality",
      //                 label: "人员民族",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "address",
      //                 label: "家庭住址",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "createTime",
      //                 label: "录入时间",
      //                 isShow: true
      //             }
      //         ],
      //         isShow: false
      //     },
      //     {
      //         label: "基本信息",
      //         prop: "two",
      //         children: [
      //             {
      //                 prop: "tel",
      //                 label: "手机号码",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "politicalStatus",
      //                 label: "政治面貌",
      //                 isShow: false
      //             },
      //             {
      //                 prop: "edu",
      //                 label: "文化程度",
      //                 isShow: false
      //             },
      //             {
      //                 prop: "maritalStatus",
      //                 label: "婚姻状况",
      //                 isShow: false
      //             }
      //         ],
      //         isShow: false
      //     },
      //     {
      //         label: "工作经历",
      //         prop: "three",
      //         children: [
      //             {
      //                 prop: "projectName",
      //                 label: "项目名称",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "companyName",
      //                 label: "所属参建单位",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "groupName",
      //                 label: "所属班组",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "workTypeName",
      //                 label: "工种",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "status",
      //                 label: "在职状态",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "bankId",
      //                 label: "工资卡银行",
      //                 isShow: false
      //             },
      //             {
      //                 prop: "account",
      //                 label: "银行卡卡号",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "isFile",
      //                 label: "合同状态",
      //                 isShow: false
      //             },
      //             {
      //                 prop: "startDate",
      //                 label: "录用时间",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "overDate",
      //                 label: "离职时间",
      //                 isShow: true
      //             },
      //             {
      //                 prop: "reason",
      //                 label: "离职原因",
      //                 isShow: false
      //             }
      //         ],
      //         isShow: false
      //     }
      // ]
    }
  },
  props: {
    showExcel: {
      type: Boolean,
      default: false,
      required: true,
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    colmnList: {
      type: Array,
      required: true,
    },
  },
  watch: {
    colmnList: {
      handler(newVal, oldVal) {
        this.getTableAllLists()
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 获取默认导出的字段数组
    getTableAllLists() {
      this.defaultArr = []
      this.getCheckedNode(this.colmnList)
      // 给选中的节点前添加对号
      this.checkedKeys = this.defaultArr
      console.log(this.checkedKeys)
      this.checkStrictly = false
    },
    handleCheckChange(data, checked, indeterminate) {
      const arr = this.$refs.columnTree
        .getCheckedKeys()
        .concat(this.$refs.columnTree.getHalfCheckedKeys())
      this.childData = []
      for (let i = 0, len = this.colmnList.length; i < len; i++) {
        this.childData = this.childData.concat(this.colmnList[i].children)
      }
      this.setDefaultFalse(this.childData)
      this.setDefauled(arr, this.childData)
      this.$emit('getSelectMenuId', this.childData, this.colmnList)
    },
    //设置选中节点为导出字段
    setDefauled(arr, list) {
      for (let item of arr) {
        for (let items of list) {
          if (item == items.prop) {
            items.isShow = true
          }
          if (items.children) {
            this.setDefauled(arr, items.children)
          }
        }
      }
    },
    //所有默认导出设置为否
    setDefaultFalse(arr) {
      for (let item of arr) {
        item.isShow = false
        if (item.children) {
          this.setDefaultFalse(item.children)
        }
      }
    },
    getCheckedNode(arr) {
      for (let item of arr) {
        if (item.isShow) {
          this.defaultArr.push(item.prop)
        }
        if (item.children) {
          this.getCheckedNode(item.children)
        }
      }
    },
    confirmExcel() {
      this.$emit('getExportList', this.$refs.columnTree.getCheckedKeys())
    },
    handleDimissionClose() {
      this.$emit('closeDialog')
    },
  },
}
</script>
<style lang="less" scoped>
.dialogTitle p {
  color: #333;
  font-size: 18px;
  line-height: 24px;
  span {
    margin-left: -10px;
    font-size: 14px;
    color: #f56c6c;
    line-height: 24px;
  }
}
</style>
